<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
<div id="app">
    <label for="firstName">firstName</label>
    <input type="text" v-model="firstName" id="firstName">
    <label for="lastName">lastName</label>
    <input type="text" v-model="lastName" id="lastName">

    <br>

    <h2>全名是：{{fullName}}</h2>
</div>

<div id="app2">
    <label for="fullName">fullName：</label>
    <input type="text" v-model.lazy.trim="fullName" id="fullName">
    <br>
    <h2>firstName:{{firstName}}</h2>
    <h2>lastName:{{lastName}}</h2>
</div>

<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            firstName:'',
            lastName: ''
        },
        <!-- 通过计算属性computed得到的计算结果会被缓存 -->
        computed:{
            // fullName:function () {
            //     return this.firstName + " " + this.lastName
            // }
            fullName:{
                get(){ //显式的get语法
                    return this.firstName + " " + this.lastName
                }
            }
        }
    });

    new Vue({ //初始化一个VUE实例
        el: '#app2',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            firstName:'',
            lastName: ''
        },
        <!-- 通过计算属性computed得到的计算结果会被缓存 -->
        computed:{
            fullName: {
                set(newVal){
                    const twoName = newVal.split(' ')
                    this.firstName = twoName[0]
                    this.lastName = twoName[1]
                }
            }
        }
    });


</script>

</body>
</html>